<template>
  <div :class="{
    'transfer-box': true,
    'transfer-box-dark': isDarkTheme,
    'transfer-box-light': !isDarkTheme,
    }">
    <div class="sub-title">
      <span class="title-text">高频转办原因</span>
      <div>
        <div v-for="(item, index) in btnList"
          :key="index"
          :class="{
            'active': index === activeNum,
            'btn-text': true,
          }"
          @click="handleClick(item, index)"
        >
        {{ item }} 
        </div>
      </div>
    </div>
    <div class="content">
      <vue-seamless-scroll
        :data="dataList"
        class="seamless-warp"
        style="width: 100%"
        :class-option="defaultOption"
      >

      <div
        v-for="(item , index) in dataList"
        :key="index"
        class="content-box" @click="handleOpenTransfer(item)">
        <img :src="item.img" alt="">
        <div class="desc"> 
          <el-tooltip
            :content="item.desc"
            placement="top"
            effect="dark"
            class="item"
          >
            <span> {{ item.desc }} </span> 
          </el-tooltip>
        </div>
        <div class="totalNum"> 
          <span class="num-text">{{ item.totalNum }}</span> 
          <span>条</span> 
        </div>
      </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  components: {
    vueSeamlessScroll,
  },
  props: {
    pageConfig: Object
  },
  data() {
    return {
      btnList: ['规则', '规则+省份'],
      activeNum: 0,
      dataList: [
        {
          img: require('../css/first-dark.png'),
          desc: '规则-文字超过长度，隐藏显示xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
          totalNum: '100'
        },
        {
          img: require('../css/second-dark.png'),
          desc: '转账',
          totalNum: '100'
        },
        {
          img: require('../css/third-dark.png'),
          desc: '转账',
          totalNum: '100'
        },
        {
          img: require('../css/fourth-dark.png'),
          desc: '转账',
          totalNum: '100'
        },
        {
          img: require('../css/fifth-dark.png'),
          desc: '转账',
          totalNum: '100'
        },
      ]
    }
  },
  computed: {
    isDarkTheme () {
      return !!this.pageConfig.isDarkTheme
    },
    defaultOption() {
      return {
        // step: 0, 
        step: 0.5,          // 数值越大速度滚动越快
        limitMoveNum: 5,   // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true,   // 是否开启鼠标悬停stop
        direction: 1,      // 0向下 1向上 2向左 3向右
        openWatch: true,   // 开启数据实时监控刷新dom
        singleHeight: 226, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0,    // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        // waitTime: 6000,    // 单步运动停止的时间(默认值1000ms)
        scrollTime: 0,     // 单步运动的时间(默认值1000ms)
        scrollNum: 1,      // 单步运动的距离(默认值1)
        scrollType: 0,     // 0匀速 1缓动
      }
    }
  },
  methods: {
    handleClick(item, index) {
      this.activeNum = index;
    },
    handleOpenTransfer(item) {
      this.$emit('handleOpenTransfer', item)
    }
  }

}
</script>

<style lang="scss">
.el-tooltip__popper {
  background-color: rgba(22, 85, 154, 0.8) !important;
  color: #fff;
}
.el-tooltip__popper .popper__arrow {
  border-top-color: rgba(22, 85, 154, 0.8) !important;  
}
.el-tooltip__popper .popper__arrow::after {
  border-top-color: rgba(22, 85, 154, 0.8) !important;
}
// .el-tooltip__popper.is-dark[x-placement^=top] .popper__arrow {
//   // border: none;
//   border-top-color: rgba(22, 85, 154, 0.8) !important;
// }
// .el-tooltip__popper[x-placement^=top] .popper__arrow {
//   border-top-color: rgba(22, 85, 154, 0.8) !important;
// }
  
</style>
<style lang="scss" scoped>
.transfer-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #fff;
  .content {
    height: calc(100% - 30px);
    padding: 0 0.4vw;
    overflow: hidden;
    // overflow-y: scroll;
    .content-box {
      width: 100%;
      height: 40px;
      padding: 0 1vw;
      display: flex;
      align-items: center;
      color: #fff;
      cursor: pointer;
      img {
        height: 20px;
        width: 20px;
      }
      .desc {
        width: 70%;
        margin: 0 10px;
        font-size: 14px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .totalNum {
        font-size: 14px;
        width: calc(30% - 40px);
        // padding: 0 0 0 0.6vw;
        display: flex;
        align-items: baseline;
        justify-content: center;
        line-height: 30px;

        .num-text {
          font-size: 16px;
          margin: 0 3px 0 0;
          font-family: "TCloudNumber";
        }
      }
    }
  }
}

.sub-title {
  // font-size: 16px;
  height: 30px;
  padding: 0 1vw 0 1.5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: url('../css/subTitle-bg-dark.png') no-repeat;
  background-size: 100% 100%;
  .title-text {
    font-size: 16px;
    font-family: "YouSheBiaoTiHei";
    text-shadow: 0 0 16px #3c98ff61;
    letter-spacing: 0.6px;
    text-transform: uppercase;
  }
  div {
    display: flex;
    align-items: center;
  }
  .btn-text {
    width: 80px;
    height: 25px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  // .btn-text:nth-child(2){
  //   width: 100px;
  // }
  
}
.transfer-box-dark {
  .content-box {
    // background: url('../css/btn-bg-dark.png') no-repeat;
    background-size: 100% 100%;
    img {
      height: 40px;
      width: 40px;
    }
  }
  .btn-text {
    background: url('../css/btn-bg-dark.png') no-repeat;
    background-size: 100% 100%;
  }
  .btn-text.active {
    background: url('../css/btn-bg-dark-active.png') no-repeat;
    background-size: 100% 100%;
  }
  .totalNum {
    background: url('../css/totalNum-bg-dark.png') no-repeat;
    background-size: 100% 100%;
    .num-text {
      text-shadow: 0 0 8px #1298FF;
      font-family: "TCloudNumber";
      letter-spacing: 0.8px;
      background: linear-gradient(180deg, #FFF 51.85%, #53B5FD 83.33%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}

  // 2K
@media screen and (max-width: 2560px) {
  .transfer-box {
    .content {
      height: calc(100% - 40px);
      .content-box {
        height: 50px;
        font-size: 18px;
        .desc {
          font-size: 16px;
        }
        .totalNum {
          font-size: 16px;
          line-height: 38px;
          .num-text {
            font-size: 28px;
          }
        }
        img {
          height: 30px;
          width: 30px;
        }
      }
    }
  }

  .sub-title {
    height: 40px;
    .title-text {
      font-size: 20px;
    }
    .btn-text {
      font-size: 18px;
      width: 140px;
      height: 30px;
    }

  }

}
@media screen and (max-width: 1920px) {
  .transfer-box {
    .content {
      height: calc(100% - 30px);
      .content-box {
        height: 40px;
        img {
          height: 20px;
          width: 20px;
        }
        .desc {
          font-size: 14px;
        }
        .totalNum {
          line-height: 30px;
          font-size: 14px;
          .num-text {
            font-size: 18px;
          }
        }
      }
    }
  }

  .sub-title {
    height: 30px;
    font-size: 16px;
    .title-text {
      font-size: 16px;
    }
    .btn-text {
      font-size: 12px;
      width: 60px;
      height: 25px;
    }

  }
}
</style>
